<template>
	<div class="page-wrapper">
		<div style="height:8%; padding-bottom:var(--mPadding);">
			<div class="flex-btn large" @click="info = { visible:true, forEdit:false } ">
				<img :src="Icon" />
				<span>新增周期</span>
			</div>
		</div>
		<div style="height:92%">
			<TableWrapper :style="{ height:'100%' }" :hasControls="false" :pageInfo="pageInfo" :sourceData="tableData" :column="column" :total="total"  @search="handleSearch" />
		</div>
		<!-- 新建巡检对象模板 弹窗 -->
		<CycleAddModal v-model:info="info" :timeList="timeList" @refresh="fetchList" />
	</div> 
</template>

<script setup>
	import { reactive, onMounted, ref, h } from 'vue';
	import { useRouter } from 'vue-router';
	import { getCycleList, delCycle  } from '@/api/cycle.js';
	import TableWrapper from '@/components/TableWrapper/index.vue';
	import CycleAddModal from './CycleAddModal.vue';
	import ConfirmDel from '@/components/ConfirmDel.vue';
	import { ElMessage  } from 'element-plus'
	import Icon from '@/assets/icon-period.png';
	const tableData = ref([]);
	const total = ref(0);
	const pageInfo = reactive({ page:1, pageSize:10 });
	const timeList = [{ label:'天', key:2 }, { label:'月', key:1 }, { label:'年', key:5 }];
	const info = ref({ visible:false, forEdit:false });
    const column = [
		{ label:'序号', hasIndex:true }, 
        { label:'周期名称', prop:'cycleName' },
		{ label:'间隔周期', hasTpl:true, render:row=>{ let obj = timeList.filter(i=>i.key === row.timeType )[0] || {}; return { com:h('div', null, [ row.intervalCycle, obj.label ] ) }} },
		{ label:'提前推送天数', hasTpl:true, render:row=>{ return { com:h('div', null, [row.forwardPushDay,'天'] ) }}},
        { label:'操作', hasTpl:true, render:(row)=>{
			return {
				com:h('div', { class:'action-container' }, [
            	    h('div', { onClick:()=>{ info.value = { visible:true, forEdit:true, row } }}, [h('i', { class:'ri-edit-2-line' }), h('span', null, '编辑')]),
					h(ConfirmDel, { info:'确定要删除此周期吗？', onConfirm:()=>{ handleDelete(row.cycleId) } } ),
            	])
			}
        }}
    ]; 	
	const handleSearch = (optional )=>{
		// 调用请求接口
		fetchList({ ...optional });
	}
	const fetchList = (params)=>{
		// 实际的axios请求;
		params = params || { };
		let realParams = { page:pageInfo.page, pageSize:pageInfo.pageSize };
		Object.keys(params).forEach(key=>{
			if ( params[key] ) {
				realParams[key] = params[key];
			}
		})
		getCycleList(realParams)
		.then(res=>{
			if ( res.data.code === 200 ){
				tableData.value = res.data.data;
				total.value = res.data.total;
			}
		})
	};
	const handleDelete = (id)=>{
		delCycle({ cycleId:id })
		.then(res=>{
			if ( res.data.code === 200 ) {
				ElMessage({
					type:'success',
					message:'删除周期成功！' 
				});
				fetchList();
			}
		})
	}
	onMounted(()=>{
		fetchList();
	})
	
</script>
